<template>
	<view class="date-selector-container">
		<tabs v-if="showTabs" :dataList="dateTypeList" @change="onDateTypeChange" :currentTab="currentDateType"></tabs>
		<view class="monthcontent">
			<span class="iconfont icon-leftarrow" :style="colorStyle" @click="onLeft"></span>
			<picker :fields="currentDateFormatter.unit" mode="date" :value="currentDateValForPass" start="2000-01-01" end="2030-01-01"
			 @change="onDatePickerConfirm">
				<view class="datevalue">
					{{currentdDateString}}
				</view>
			</picker>
			<view :style="colorStyle">
				<span class="iconfont icon-rightarrow"  @click="onRight"></span>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	import {
		getTheDateValue
	} from './datePickerHelper.js'
	import tabs from '../tabs/index.vue'
	let dateTypeNameMap = {
		day: "日",
		week: "周",
		month: "月",
		year: "年",
		total: "总"
	}
	let dateTypeMap = {
		day: {
			format1: "YYYY年MM月DD日",
			format2: "YYYY-MM-DD",
			unit: 'day',
			value: 1,
			enable: true
		},
		week: {
			format1: "YYYY年MM月DD日",
			format2: "YYYY-MM-DD",
			unit: 'day',
			value: 7,
			enable: true
		},
		month: {
			format1: "YYYY年MM月",
			format2: "YYYY-MM",
			unit: 'month',
			value: 1,
			enable: true
		},
		year: {
			format1: "YYYY年",
			format2: "YYYY",
			unit: 'year',
			value: 1,
			enable: true
		},
		total: {
			format1: "--",
			format2: "--",
			enable: false
		}
	}
	export default {
		components: {
			tabs
		},
		props: {
			defaultDateType: {
				type: String,
				// default: "month"
			},
			defaultDateValue: {
				type: [Object,String],
				default: undefined
			},
			dateTypes: {
				type: Array,
				default: () => {
					return ["month", "year", "total"]
				}
			}
		},
		data() {
			return {
				colorStyle: {
					color: '#068888'
				},
				defaultDateSetted: false,
				currentDateType: 'month',
				datePickerVisible: false,
				currentDateValue: moment().startOf('month'),
			};
		},
		watch: {
			defaultDateValue: {
				immediate: true,
				handler(newVal, val) {
					console.log('defaultDateValue changed', newVal, val)
					if (newVal) {
						this.currentDateValue = moment(newVal)
						this.defaultDateSetted = true
					}
				}
			},
			dateTypes:{
				immediate: true,
				handler(newVal, val){
					if(newVal && !this.defaultDateType){
						this.currentDateType = newVal[0]
						if (this.currentDateType != "total" && !this.defaultDateSetted) {
							this.currentDateValue = moment()
								.startOf(newVal)
								// .format("YYYY-MM-DD");
						}
					}
				}
			},
			defaultDateType: {
				immediate: true,
				handler(newVal, val) {
					console.log("defaultDateType changed", newVal, val);
					if (newVal) {
						this.currentDateType = newVal;
						if (newVal != "total" && !this.defaultDateSetted) {
							this.currentDateValue = moment()
								.startOf(newVal)
								// .format("YYYY-MM-DD");
						}
					}
				}
			}
		},
		computed: {
			dateTypeList() {
				// console.log('dateTypeList', this.dateTypes, dateTypeNameMap)
				let typeList = this.dateTypes.map(item => {
					return {
						name: dateTypeNameMap[item],
						value: item
					}
				})
				return typeList
			},
			showTabs() {
				return this.dateTypes.length > 1;
			},
			currentDateFormatter() {
				return dateTypeMap[this.currentDateType];
			},
			currentdDateString() {
				return this.currentDateValue.format(this.currentDateFormatter.format1);
			},
			currentDateValForPass() {
				console.log('currentDateValForPass', this.currentDateValue)
				return this.currentDateValue.format(this.currentDateFormatter.format2);
			}
		},
		methods: {
			emit() {
				let params = getTheDateValue(this.currentDateType, moment(this.currentDateValue))
				console.log('date change', params)
				this.$emit("change", params);
			},
			onDateTypeChange(item) {
				console.log("onDateTypeChange", item);
				this.currentDateType = item.value;
				this.currentDateValue = moment().startOf(this.currentDateType);
				this.emit();
			},
			onLeft(e) {
				console.log("onLeft", e);
				if (!this.currentDateFormatter.enable) return;

				this.currentDateValue = moment(this.currentDateValue.add(
					-1 * this.currentDateFormatter.value,
					this.currentDateFormatter.unit
				))
				this.emit();
			},
			onRight(e) {
				console.log("onRight", e);
				if (!this.currentDateFormatter.enable) return;
				this.currentDateValue = moment(this.currentDateValue.add(
					this.currentDateFormatter.value,
					this.currentDateFormatter.unit,
				))
				this.emit();
			},
			onDatePickerConfirm(e) {
				console.log("onDatePickerConfirm", e);
				this.currentDateValue = moment(e.detail.value);
				console.log('onDatePickerConfirm, currentDateValue', this.currentDateValue.format('YYYY-MM-DD'))
				this.emit();
			}
		},
		created() {},
		mounted() {}
	};
</script>
<style lang="scss" scoped>
	@import "./iconfont.css";
	.date-selector-container {
		background-color: white;
		padding-bottom: 12rpx;

		.monthcontent {
			position: relative;
			margin-top: 25rpx;
			display: flex;
			justify-content: space-around;
			// .arrow{
			// 	flex-grow: 1;
			// }
			.datevalue {
				text-align: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}
		}
	}
</style>
